<script lang="ts" setup>
import { useRouter } from "vue-router";
import { userStore } from "@/store";
import { logout } from "@/api";
import { ElMessage } from "element-plus";
import { systemStore } from '@/store';
const systemstore = systemStore();
const userstore = userStore();
const router = useRouter();
const handlelogout = function(){
  logout().then(res=>{
    if(res.data.status){
      userstore.status = false;
      userstore.username = '';
      userstore.avatar = null;
      userstore.menus = [];
      ElMessage({
        'message':res.data.message,
        'icon':'check'
      })
      router.push('/login')
    }
  })

}
</script>

<template>
  <div class="header">
    <div
      style="
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      SKYMIAO-ADMIN
    </div>
    <div style="width: 40px;display: flex;justify-content: center;align-items: center;">
          <el-icon v-if="systemstore.expandbool" @click="systemstore.expandbool = !systemstore.expandbool" style="font-size: 20px;"><Expand /></el-icon>
          <el-icon v-if="!systemstore.expandbool"  @click="systemstore.expandbool = !systemstore.expandbool" style="font-size: 20px;"><Fold /></el-icon>
        </div>
    <div
      style="
        width: calc(100% - 240px);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0px 20px;
        box-sizing: border-box;
      "
    >
      <div style="width: 80px;">
          <el-badge :value="12" class="item">
              <el-button icon="message"></el-button>
          </el-badge>
      </div>
      <el-dropdown size="small">
        <span style="display: flex; align-items: center">
          <el-button>
            {{ userstore.username }}
            <el-icon>
              <arrow-down />
            </el-icon>
          </el-button>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-button > 个人中心 </el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button @click="handlelogout"> 退出登录 </el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style>
.header {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(123,123,123,0.5);
  filter:blur(0px);
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
  
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
